<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view style="padding: 20rpx;">
		<view class="box" style="display: flex;">
			<view style="flex:1;display:flex;flex-direction: column;justify-content: space-between;">
				<view style="font-size: 32rpx;font-weight: bolder;">
					{{departmentInfo.name}}
					<uni-icons type="info" color="#127add"></uni-icons>
				</view>
				<view style="font-size: 26rpx;">科室介绍：{{departmentInfo.description ||''}}</view>
				<view style="font-size: 26rpx;">联系方式：{{departmentInfo.phone ||''}}</view>
				<view style="font-size: 26rpx;">科室位置：{{departmentInfo.address||''}}</view>
			</view>
			<view style="width: 150rpx;height: 150rpx;">
				<image src="../../static/科室管理.png" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<view class="box" style="margin-top:20rpx;padding: 0;">
			<wu-calendar ref="calendar" :date="date" :type="type" :mode="mode" :color="color" :insert="insert"
				:fold="fold" :startWeek="startWeek" :slideSwitchMode="slideSwitchMode" :startDate="startDate"
				:endDate="endDate" :monthShowCurrentMonth="monthShowCurrentMonth" :lunar="lunar"
				:rangeEndRepick="rangeEndRepick" :rangeSameDay="rangeSameDay"
				:rangeHaveDisableTruncation="rangeHaveDisableTruncation" :showMonth="showMonth" :clearDate="clearDate"
				:useToday="useToday" :selected="selected" @confirm="calendarConfirm"></wu-calendar>
			<button @click="open">选择预约日期</button>
		</view>
		<view class="box" style="margin-top:20rpx;padding: 0;line-height: 25rpx;">
			<uni-section title="当前日期" type="line">
				<template v-slot:right>
					{{date}}
				</template>
			</uni-section>
		</view>
		<view style="margin-top: 20rpx;padding: 20rpx 0;"
			v-if="morningAppointmentSchedulerDetailInfos.length!=0 || afternoonAppointmentSchedulerDetailInfos.length!=0">
			<view v-if="morningAppointmentSchedulerDetailInfos.length!=0" style="margin-bottom: 20rpx;">
				<view style="font-weight: 700;"><uni-icons custom-prefix="iconfont"
						type="icon-shangwu"></uni-icons><text style="font-size: 27rpx;margin-left: 10rpx;">上午号源</text>
				</view>
				<view v-for="item in morningAppointmentSchedulerDetailInfos"
					style="background-color: #fff;border-radius: 10rpx;box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);display: flex;padding: 30rpx 10rpx;margin-top: 20rpx;">
					<view style="display: flex;">
						<view style="width: 110rpx;height: 110rpx;">
							<image :src="item.doctor.user.avatar" style="width: 100%;height: 100%;border-radius: 50%;">
							</image>
						</view>
						<view style="flex:1;flex-direction: column;justify-content: space-between;width: 350rpx;">
							<text
								style="padding-right: 10rpx; border-right: 2rpx solid #ccc;">{{item.doctor.user.userName}}</text>
							<text style="font-size: 25rpx;padding-left: 10rpx;">{{item.doctor.position || ''}}</text>
							<view class="characteristics">{{item.doctor.characteristics || ''}}</view>
						</view>
					</view>
					<view style="flex: 1;display:flex;justify-content: center;align-items: center;">
						<text
							style="color:#fc8d08;font-weight: bold;margin-right: 30rpx;">￥{{item.doctor.registrationFee}}</text>
						<view v-if="item.status==='1'"
							style="width: 100rpx;height:100rpx;font-size:25rpx;font-weight: bold;text-align: center;line-height: 50rpx;"
							@click="openPopup(item)">
							<view
								style="height: 50rpx;background-color: #74a8fb;color: #ffffff;border-top-left-radius:10rpx;border-top-right-radius: 10rpx;">
								预约
							</view>
							<view
								style="height: 50rpx;background-color: #eef2fe;color: #74a8fb;border-bottom-left-radius:10rpx;border-bottom-right-radius: 10rpx;">
								余{{item.availableNumber}}
							</view>
						</view>
						<view v-else-if="item.status==='0'"
							style="width: 100rpx;height:50rpx;font-size:25rpx;font-weight: bold;text-align: center;line-height: 50rpx;border-radius: 10rpx;background-color: #ccba55;color: #ffffff;">
							约满
						</view>
						<view v-else
							style="width: 100rpx;height:50rpx;font-size:25rpx;font-weight: bold;text-align: center;line-height: 50rpx;border-radius: 10rpx;background-color: #fc1e1e;color: #ffffff;">
							停诊
						</view>
					</view>
				</view>
			</view>
			<view v-if="afternoonAppointmentSchedulerDetailInfos.length!=0">
				<view style="font-weight: 700;"><uni-icons custom-prefix="iconfont" type="icon-bangwan"
						size="13"></uni-icons><text style="font-size: 27rpx;margin-left: 14rpx;">下午号源</text></view>
				<view v-for="item in afternoonAppointmentSchedulerDetailInfos"
					style="background-color: #fff;border-radius: 10rpx;box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);display: flex;padding: 30rpx 10rpx;margin-top: 20rpx;">
					<view style="display: flex;">
						<view style="width: 110rpx;height: 110rpx;">
							<image :src="item.doctor.user.avatar" style="width: 100%;height: 100%;border-radius: 50%;">
							</image>
						</view>
						<view style="flex:1;flex-direction: column;justify-content: space-between;width: 350rpx;">
							<text
								style="padding-right: 10rpx; border-right: 2rpx solid #ccc;">{{item.doctor.user.userName}}</text>
							<text style="font-size: 25rpx;padding-left: 10rpx;">{{item.doctor.position || ''}}</text>
							<view class="characteristics">{{item.doctor.characteristics || ''}}</view>
						</view>
					</view>
					<view style="flex: 1;display:flex;justify-content: center;align-items: center;">
						<text
							style="color:#fc8d08;font-weight: bold;margin-right: 30rpx;">￥{{item.doctor.registrationFee}}</text>
						<view v-if="item.status==='1'"
							style="width: 100rpx;height:100rpx;font-size:25rpx;font-weight: bold;text-align: center;line-height: 50rpx;"
							@click="openPopup(item)">
							<view
								style="height: 50rpx;background-color: #74a8fb;color: #ffffff;border-top-left-radius:10rpx;border-top-right-radius: 10rpx;">
								预约
							</view>
							<view
								style="height: 50rpx;background-color: #eef2fe;color: #74a8fb;border-bottom-left-radius:10rpx;border-bottom-right-radius: 10rpx;">
								余{{item.availableNumber}}
							</view>
						</view>
						<view v-else-if="item.status==='0'"
							style="width: 100rpx;height:50rpx;font-size:25rpx;font-weight: bold;text-align: center;line-height: 50rpx;border-radius: 10rpx;background-color: #ccba55;color: #ffffff;">
							约满
						</view>
						<view v-else
							style="width: 100rpx;height:50rpx;font-size:25rpx;font-weight: bold;text-align: center;line-height: 50rpx;border-radius: 10rpx;background-color: #fc1e1e;color: #ffffff;">
							停诊
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="box" style="margin-top: 20rpx;padding: 35rpx 0;text-align: center;">
			<text style="font-size: 27rpx;color:#b9b9b9 ;">当天无号，请查看其他日期号源 </text>
		</view>
		<view>
			<uni-popup ref="popup" type="bottom" @change="change">
				<view style="background-color: #ffffff;border-top-left-radius:30rpx;border-top-right-radius: 30rpx; ">
					<text
						style="display: block;text-align: center;font-weight: 600;font-size: 25rpx;padding: 30rpx 0;">请选择就诊时段挂号</text>
					<scroll-view style="margin:30rpx 20rpx;height: 510rpx;" scroll-y="true">
						<view v-for="item in appointmentTimeList" style="display: inline-block;text-align: center;padding:10rpx;margin:20rpx;line-height: 60rpx;height: 60rpx;background-color: #fff;
		             border-radius: 10rpx;box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);" @click="selectTime(item)">
							<text v-if="item.status==='1'" style="font-size: 27rpx;font-weight: 400;">{{item.appointmentTime}}-{{item.finishTime}}可预约</text>
							<text v-else-if="item.status==='0'"   style="font-size: 27rpx;font-weight: 400;">{{item.appointmentTime}}-{{item.finishTime}}占用中</text>
							<text v-else   style="font-size: 27rpx;font-weight: 400;">{{item.appointmentTime}}-{{item.finishTime}}不可约</text>
						</view>
					</scroll-view>
					<button  type="default" style="color: #74a8fb;" @click="closePopup">取消</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				departmentId: null,
				departmentInfo: {},
				appointmentSchedulerList: [],
				morningAppointmentSchedulerDetailInfos: [],
				afternoonAppointmentSchedulerDetailInfos: [],
				item: {doctor: {user: {}, department: {}}},
				date: "",
				type: "week",
				mode: "single",
				color: "#3c9cff",
				insert: false,
				fold: true,
				startWeek: "mon",
				slideSwitchMode: "horizontal",
				startDate: "",
				endDate: "",
				monthShowCurrentMonth: false,
				lunar: false,
				rangeEndRepick: false,
				rangeSameDay: false,
				rangeHaveDisableTruncation: false,
				showMonth: false,
				clearDate: true,
				useToday: false,
				selected: [],
				appointmentTimeList: []
			}
		},
		onLoad(option) {
			this.departmentId = option.departmentId;
			this.getCurrentDate();
			this.selectAppointmentSchedulerDetailInfos(this.departmentId, this.date);
			this.load();
		},
		methods: {
			load() {
				this.$request.get('/department/' + this.departmentId).then(res => {
					this.departmentInfo = res.data;
					console.log(this.departmentInfo)
				})
			},
			getCurrentDate() {
				const currentDate = new Date(+new Date() + 8 * 3600 * 1000);
				this.date = currentDate.toISOString().split('T')[0];
				this.startDate = this.date;
				const endDate = new Date(currentDate);
				endDate.setDate(endDate.getDate() + 6);
				this.endDate = endDate.toISOString().split('T')[0];
				console.log(this.startDate + "===" + this.endDate);
			},
			calendarConfirm(e) {
				if (e.extraInfo.disabled) {
					return;
				}
				this.date = e.fulldate;
				this.selectAppointmentSchedulerDetailInfos(this.departmentId, this.date);
			},
			selectAppointmentSchedulerDetailInfos(departmentId, workDate) {
				let params = {
					departmentId: this.departmentId,
					workDate: this.date
				}
				this.$request.get('/appointment-scheduler/selectAppointmentSchedulerDetailInfos', params).then(res => {
					console.log(res.data)
					this.morningAppointmentSchedulerDetailInfos = res.data.morningAppointmentSchedulerDetailInfos;
					this.afternoonAppointmentSchedulerDetailInfos = res.data
						.afternoonAppointmentSchedulerDetailInfos;
				})
			},
			openPopup(item) {
				this.item = item;
				this.$request.get('/appointment-scheduler/getAppointmentTimeList/' + item.id).then(res => {
					this.appointmentTimeList = res.data;
					console.log(this.appointmentTimeList)
				})
				this.$refs.popup.open();
			},
			closePopup(){
				this.$refs.popup.close();
			},
			change(e) {
				this.show = e.show
			},
			selectTime(item){
				 if (item.status != '1') {
				           return;
			     }
				 const obj = {
				  appointmentItem: this.item,
				  appointmentTimeItem: item
				 };
				 const params = encodeURIComponent(JSON.stringify(obj));
				 uni.navigateTo({
				 	url:`/pages/registrationConfirmation/registrationConfirmation?params=${params}`
				 })
				 
			},
			// 打开日历
			open() {
				let params = {
					departmentId: this.departmentId,
					startDate: this.startDate,
					endDate: this.endDate
				}
				this.selected = [];
				this.$request.get('/appointment-scheduler/getDepartmentAppointmentScheduler', params).then(res => {
					this.appointmentSchedulerList = res.data;
					console.log(this.appointmentSchedulerList);
					this.appointmentSchedulerList.forEach((appointmentScheduler) => {
						if (appointmentScheduler.status === '-1') {
							this.selected.push({
								date: appointmentScheduler.date,
								topInfo: '无号',
								topInfoColor: '#b9b9b9',
								disabled: true
							})
						} else if (appointmentScheduler.status === '0') {
							this.selected.push({
								date: appointmentScheduler.date,
								topInfo: '约满',
								topInfoColor: '#df3a32',
								badge: true,
								badgeSize: "8rpx",
								badgePosition: "bottom-center",
								infoColor: "#df3a32",
								disabled: true
							})
						} else {
							this.selected.push({
								date: appointmentScheduler.date,
								topInfo: '有号',
								topInfoColor: '#00d000',
								badge: true,
								badgeSize: "8rpx",
								badgePosition: "bottom-center",
								infoColor: "#00d000",
								disabled: false
							})
						}
						let nextDate = new Date(new Date(+new Date() + 8 * 3600 * 1000));
						nextDate.setDate(nextDate.getDate() + 7);
						this.selected.push({
							date: nextDate.toISOString().split('T')[0],
							topInfo: '即将放号',
							topInfoColor: '#f0c55d',
							badge: true,
							badgeSize: "8rpx",
							badgePosition: "bottom-center",
							infoColor: "#f0c55d",
							disabled: true
						})
					})
				})
				this.$refs.calendar.open();
			}

		}
	}
</script>

<style>
	.box {
		background-color: #fff;
		border-radius: 10rpx;
		line-height: 47rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
	}

	.characteristics {
		padding: 5rpx 0;
		font-size: 20rpx;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>